<script setup lang="ts">
import {useTabsStore} from "~/stores/tabs";
const tabs=useTabsStore();
const route=useRoute();
const props=defineProps<{tabs:Array<String>,coms:Array<any>}>();
let model=ref();
let com=ref({});
watchEffect(()=>{
  tabs.setTabs(route.path,props.tabs);
  // tabs.setComs(route.path,props.coms);
})
watchEffect(()=>{
  if(route.query.tab&&Number(route.query.tab)<props.tabs.length){
    tabs.setActive(route.path,Number(route.query.tab));
  }else {
    tabs.setActive(route.path,0);
  }
})
watchEffect(()=>{
  model.value=tabs.active[route.path];
})
</script>

<template>
  <NuxtLayout name="admin">
    <el-tabs v-model="model" class="w-full bg-white tabs" @change="tabs.setActive(route.path,model)">
      <template v-for="(item,i) in props.tabs">
        <el-tab-pane :name="i" :lazy="i==model" v-if="item">
          <template #label>
            <div class="px-5">{{ item }}</div>
          </template>
          <div class="box py-5 px-5">
            <component :is="props.coms[i]"></component>
          </div>
        </el-tab-pane>
      </template>
    </el-tabs>
  </NuxtLayout>

</template>

<style scoped lang="scss">
.box{
  background-color: #eef0f5;
  height: calc(100vh - 141px);
  padding-bottom: 20px;
  overflow: auto;
}
</style>